import './index.less';

import { useEffect } from 'react';

import {
  ArchivesModelState,
  useDispatch,
  useSelector,
} from 'umi';

import { IArticleItem } from '@/types';

export default function Archives() {
  const dispatch = useDispatch();
  const { archivesList, archivesLength } = useSelector((state: { archives: ArchivesModelState }) => state.archives)
  useEffect(() => {
    dispatch({
      "type": 'archives/getArchivesList'
    })
  }, [])
  return (
    <div className='archives'>
      <div className='archives_left'>
        <div className='archives_header'>
          <p><span>归档</span></p>
          <p className='p_two'>共计 <span>{archivesLength}</span> 篇</p>
        </div>
        <div className='archives_main'>
          <h2>2022</h2>
          <div className='archives_January'>
            <h3>January</h3>
            <ul>
              {
                archivesList && archivesList.length > 0 ? archivesList.map((item: IArticleItem) => {
                  return <li className='archives_January_list' key={item.id}>
                    <a href=""><span className='span_1'>
                      <time dateTime='01-06'>01-06</time>
                    </span>
                      <span className='span_2'>{item.title}</span>
                    </a>
                  </li>
                }) : ''
              }
            </ul>
          </div>
        </div>
      </div>
      <div className='archives_right'></div>

    </div>
  )
}
